<template>
  <div class="SelectPick">
    <van-field
      v-model="result"
      is-link
      readonly
      :name="selectProps.name"
      :label="selectProps.label"
      :placeholder="
        selectProps.placeholder ? selectProps.placeholder : `请选择${selectProps.label}`
      "
      :rules="[
        {
          required: selectProps.required,
          message: selectProps.placeholder ? selectProps.placeholder : `请选择${selectProps.label}`,
        },
      ]"
      @click="showPicker = true"
    />
    <van-popup v-model:show="showPicker" position="bottom">
      <template v-if="selectProps.type == 'date'">
        <van-datetime-picker
          v-model="resultDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirmDate"
          @cancel="showPicker = false"
        />
      </template>
      <template v-else-if="selectProps.type == 'provinceCityDistrict'">
        <van-picker
          :columns="selectProps.columns"
          @confirm="onConfirmProvinceCityDistrict"
          @cancel="showPicker = false"
        />
      </template>
      <template v-else>
        <van-picker
          :columns="selectProps.columns"
          :columns-field-names="customFieldName"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </template>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { commonTypes } from '@/typings/commonTypes';
import { isEmpty } from '@/utils/common';

import { Cell, CellGroup, Dialog, Step, Steps, Form, Field, Picker } from 'vant';
import type { FormInstance } from 'vant';

import { useStore } from 'vuex';
const store = useStore<commonTypes.IState>();
//因为这里用了script的setup方式就用不到 defineComponent 这个定义组件的api了
import {
  useSlots,
  useAttrs,
  defineProps,
  onMounted,
  watchEffect,
  ref,
  reactive,
  PropType,
  watch,
} from 'vue';

//获取子组件传的值
const props = defineProps({
  selectProps: {
    // type:  Array as () => Array<string>, //(string也可以是其他你自定义的接口)
    type: Object as PropType<commonTypes.IselectProps>,
    required: true,
    default: () => {
      return {};
    },
  },
});

//获取到父组件的对象
const result = ref<any>('');
const resultDate = ref<any>();

const showPicker = ref<boolean>(false);

const minDate = new Date(1940, 0, 1);
const maxDate = new Date();

const customFieldName = {
  text: 'name',
};

const onConfirmDate = (value: any) => {
  let date = dayjs(value).format('YYYY-MM-DD');
  console.log(date);
  result.value = date;
  let payloadItem: commonTypes.IpayloadItem = {
    keyOne: props.selectProps.keyOne,
    keyTwo: props.selectProps.keyTwo,
    valueAndObj: date,
  };
  store.dispatch('formItemAction', payloadItem);
  showPicker.value = false;
};

const onConfirm = (obj: commonTypes.Icolumns) => {
  result.value = obj.name;
  showPicker.value = false;

  let payloadItem: commonTypes.IpayloadItem = {
    keyOne: props.selectProps.keyOne,
    keyTwo: props.selectProps.keyTwo,
    valueAndObj: { name: obj.name, code: obj.code },
  };
  store.dispatch('formItemAction', payloadItem);
  console.log('onConfirm:', obj, props.selectProps.name);
};

//省市区的确认
const onConfirmProvinceCityDistrict = (array: commonTypes.Icolumns[]) => {
  console.log('onConfirmProvinceCityDistrict:', array);
  const { name, type, ProvCityCountyArray, keyOne, keyTwo } = props.selectProps;
  let ProvCityCountyValue = array[0].itemsName + '' + array[1].itemsName + '' + array[2].itemsName;
  if (name == 'register' && type == 'provinceCityDistrict') {
    //户口地址
    let payloadItem: commonTypes.IpayloadItem = {
      keyOne: keyOne,
      keyTwo: keyTwo,
      valueAndObj: ProvCityCountyValue,
    };
    let key1 = ProvCityCountyArray ? ProvCityCountyArray[0] : '';
    let key2 = ProvCityCountyArray ? ProvCityCountyArray[1] : '';
    let key3 = ProvCityCountyArray ? ProvCityCountyArray[2] : '';
    let payloadProvCityCounty = {
      [key1]: array[0].itemsName,
      [key2]: array[1].itemsName,
      [key3]: array[2].itemsName,
    };
    store.dispatch('formItemAction', payloadItem);
    store.dispatch('registerAction', payloadProvCityCounty);
    result.value = ProvCityCountyValue;
  }

  if (name == 'residence' && type == 'provinceCityDistrict') {
    //现住地址
    result.value = ProvCityCountyValue;
    let payloadItem: commonTypes.IpayloadItem = {
      keyOne: keyOne,
      keyTwo: keyTwo,
      valueAndObj: ProvCityCountyValue,
    };
    store.dispatch('formItemAction', payloadItem);
  }
  if (name == 'birthProvAndBirthCityAndBirthCounty' && type == 'provinceCityDistrict') {
    //出生地  赋值同时有code
    let key1 = ProvCityCountyArray ? ProvCityCountyArray[0] : '';
    let key2 = ProvCityCountyArray ? ProvCityCountyArray[1] : '';
    let key3 = ProvCityCountyArray ? ProvCityCountyArray[2] : '';
    let payloadProvCityCounty = {
      [key1]: { name: array[0].itemsName, code: array[0].itemsCode },
      [key2]: { name: array[1].itemsName, code: array[1].itemsCode },
      [key3]: { name: array[2].itemsName, code: array[2].itemsCode },
    };
    store.dispatch('birthProvAndBirthCityAndBirthCountyAction', payloadProvCityCounty);
    result.value = ProvCityCountyValue;
  }
  if (name == 'contactAddress' && type == 'provinceCityDistrict') {
    //联系人住址
    let payloadItem: commonTypes.IpayloadItem = {
      keyOne: keyOne,
      keyTwo: keyTwo,
      valueAndObj: ProvCityCountyValue,
    };
    let key1 = ProvCityCountyArray ? ProvCityCountyArray[0] : '';
    let key2 = ProvCityCountyArray ? ProvCityCountyArray[1] : '';
    let key3 = ProvCityCountyArray ? ProvCityCountyArray[2] : '';
    let payloadProvCityCounty = {
      [key1]: array[0].itemsName,
      [key2]: array[1].itemsName,
      [key3]: array[2].itemsName,
    };
    store.dispatch('formItemAction', payloadItem);
    store.dispatch('contactAddressAction', payloadProvCityCounty);
    result.value = ProvCityCountyValue;
  }
  showPicker.value = false;
};

const init = (newProps: commonTypes.IselectProps) => {
  if (newProps.type == 'date') {
    // eslint-disable-next-line no-debugger
    //debugger;
    if (!isEmpty(store.state.form[newProps.keyOne as string])) {
      resultDate.value = new Date(
        store.state.form[newProps.keyOne as string][newProps.keyTwo as string].trim(),
      );
    } else {
      resultDate.value = '';
    }
  }
  if (
    newProps.type == 'provinceCityDistrict' &&
    newProps.name == 'birthProvAndBirthCityAndBirthCounty'
  ) {
    //出生地
    result.value = newProps.handleValue ? newProps.handleValue() : '';
  } else if (newProps.keyOne && newProps.keyTwo) {
    let oneTwoValue = store.state.form[newProps.keyOne as string][newProps.keyTwo];
    if (newProps.keyOne == 'patAdmiNote') {
      console.log(
        2222222222,
        !isEmpty(store.state.form.patAdmiNote),
        newProps.keyOne,
        newProps.keyTwo,
        typeof store.state.form[newProps.keyOne as string][newProps.keyTwo] == 'string',
        store.state.form[newProps.keyOne as string][newProps.keyTwo],
      );
      if (!isEmpty(store.state.form.patAdmiNote)) {
        if (isEmpty(oneTwoValue)) {
          return (result.value = '');
        }
        result.value =
          typeof store.state.form[newProps.keyOne as string][newProps.keyTwo] == 'string'
            ? store.state.form[newProps.keyOne as string][newProps.keyTwo]
            : store.state.form[newProps.keyOne as string][newProps.keyTwo].name;
      } else {
        result.value = '';
      }
    } else {
      result.value =
        typeof store.state.form[newProps.keyOne][newProps.keyTwo] == 'string'
          ? store.state.form[newProps.keyOne][newProps.keyTwo]
          : store.state.form[newProps.keyOne][newProps.keyTwo].name;
    }
  }
};

onMounted(() => {
  //console.log('onMounted:', PerSonal.docAdmiNote?.admissionNum);
});

// 1.监听对象 赋值
watch(
  () => props.selectProps,
  (newProps) => {
    init(newProps);
  },
  {
    deep: true, // 深度监听的参数
    immediate: true, //绑定值就开始执行监听
  },
);

//watchEffect 会最先执行
/*watchEffect(() => {

});*/
</script>

<style scoped lang="scss">
.SelectPick {
}
</style>
